<template>
  <div>
    <el-dialog
      title="选择课件"
      v-bind="$attrs"
      v-on="$listeners"
      append-to-body
      width="60%"
      @close="close"
    >
      <div class="JADP-common-layout" style="height: 45vh">
        <div class="JADP-common-layout-left" style="height: 100%">
          <div class="JADP-common-title">
            <h2>课件分类</h2>
          </div>
          <el-tree
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            highlight-current
            ref="treeBox"
            :expand-on-click-node="false"
            @node-click="handleNodeClick"
            class="JADP-common-el-tree"
            node-key="id"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <i :class="data.icon"></i>
              <span class="text">{{ node.label }}</span>
            </span>
          </el-tree>
        </div>
        <div class="JADP-common-layout-center">
          <div class="JADP-common-layout-main JADP-flex-main">
            <el-row class="JADP-common-search-box" :gutter="16">
              <el-form @submit.native.prevent>
                <!-- <el-col :span="6" v-show="false">
            <el-form-item label="分类">
              <el-select v-model="query.type" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in getDict('kjfl')"
                  :key="index"
                  :label="item.dataName"
                  :value="item.id"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
                <el-col :span="6">
                  <el-form-item label="课件名称">
                    <el-input
                      v-model="query.name"
                      placeholder="请输入"
                      clearable
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="课件类型">
                    <el-select
                      v-model="query.coursetype"
                      placeholder=""
                      clearable
                    >
                      <el-option
                        v-for="(item, index) in getDict('KeJianType')"
                        :key="index"
                        :label="item.dataName"
                        :value="item.id"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item>
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="search()"
                      >查询</el-button
                    >
                    <el-button icon="el-icon-refresh-right" @click="reset()"
                      >重置</el-button
                    >
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
            <JADP-table
              v-bind="$attrs"
              v-on="$listeners"
              noCheck
              ref="multipleTable"
              v-loading="listLoading"
              :data="list"
              @sort-change="sortChange"
              has-c
              @selection-change="handleSelectionChange"
            >
              <el-table-column prop="type" label="分类" align="center">
                <template #default="{ row }">
                  <!-- {{ getDict("kjfl", row.type) }} -->
                  {{ row.type }}
                </template>
              </el-table-column>
              <el-table-column prop="name" label="课件名称" align="center" />
              <el-table-column
                prop="coursetype"
                label="课件类型"
                align="center"
              >
                <template #default="{ row }">
                  {{ getDict("KeJianType", row.coursetype) }}
                </template>
              </el-table-column>
              <el-table-column label="学习时长" align="center">
                <template v-slot="{ row }">
                  {{ row.fen ? row.fen + "分" + row.miao + "秒" : 0 }}
                </template>
              </el-table-column>
              <!-- <el-table-column
                prop="miao"
                label="学习时长：秒"
                align="center"
              /> -->
              <el-table-column
                prop="coursewaretime"
                label="学时"
                align="center"
              />
              <el-table-column prop="teacher" label="主讲老师" align="center" />
              <!-- <el-table-column
                prop="creatoruserid"
                label="创建用户"
                align="center"
              />
              <el-table-column
                prop="creatortime"
                label="创建时间"
                width="140"
                align="center"
                sortable="custom"
              /> -->
              <el-table-column label="操作" fixed="right" width="150">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    @click="addOrUpdateHandle(scope.row.id)"
                    >编辑
                  </el-button>
                  <el-button
                    type="text"
                    class="JADP-table-delBtn"
                    @click="handleDel(scope.row.id)"
                    >删除
                  </el-button>
                  <el-button
                    type="text"
                    @click="addOrUpdateHandle(scope.row.id, true)"
                    >详情
                  </el-button>
                </template>
              </el-table-column>
            </JADP-table>
            <pagination
              :total="total"
              :page.sync="listQuery.currentPage"
              :limit.sync="listQuery.pageSize"
              @pagination="initData"
            />
          </div>
        </div>
      </div>
      <span slot="footer">
        <el-button @click="$emit('update:visible', false)">取 消</el-button>
        <el-button type="primary" @click="Echo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getDictionaryDataSelector } from "@/api/systemData/dictionary";
import request from "@/utils/request";
export default {
  name: "",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "fullName"
      },
      treeData: [],
      treeActiveId: "",
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      },
      query: {
        type: undefined,
        name: undefined,
        coursetype: undefined
      },
      list: [],
      listLoading: true,
      multipleSelection: [],
      total: 0
    };
  },
  created() {
    // this.getTreeView();
    this.getTreeData();
    this.initData();
  },
  methods: {
    search() {
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      };
      this.initData();
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      if (isrRefresh) this.reset();
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      };
      this.initData();
    },
    getTreeData() {
      this.request({
        url: "/api/coursewaretype/Xy_ks_courseware_type/getTreeList",
        method: "get"
      }).then(res => {
        let topItem = {
          fullName: "默认",
          hasChildren: true,
          id: "-1",
          icon: "icon-ym icon-ym-tree-organization3",
          children: res.data
        };
        this.treeData = [topItem];
      });
    },
    close() {
      this.$emit("update:visible", false);
    },
    // handleNodeClick(data) {
    //   this.treeActiveId = data.id;
    //   for (let key in this.query) {
    //     this.query[key] = undefined;
    //   }
    //   this.query.f_type = data.id;
    //   this.listQuery = {
    //     currentPage: 1,
    //     pageSize: 20,
    //     sort: "desc",
    //     sidx: "creatortime",
    //   };
    //   this.initData();
    // },
    handleNodeClick(data) {
      this.query.type = data.id;
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
        sidx: "creatortime"
      };
      this.initData();
    },
    Echo() {
      this.$emit("Echo", this.multipleSelection);
      this.$refs.multipleTable.$refs.JADPTable.clearSelection();
      this.$emit("update:visible", false);
    },
    initData() {
      this.listLoading = true;
      let _query = {
        ...this.listQuery,
        ...this.query,
        organizeId:this.$store.getters.organizeId
      };
      let query = {};
      for (let key in _query) {
        if (Array.isArray(_query[key])) {
          query[key] = _query[key].join();
        } else {
          query[key] = _query[key];
        }
      }
      request({
        url: `/api/courseware/Xy_ks_courseware`,
        method: "get",
        data: query
      }).then(res => {
        this.list = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    sortChange({ column, prop, order }) {
      this.listQuery.sort = order == "ascending" ? "asc" : "desc";
      this.listQuery.sidx = !order ? "" : prop;
      this.initData();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
    // getTreeView() {
    //   getDictionaryDataSelector("fa6651a609b140d3b2f64ab5daf8e31b").then(
    //     (res) => {
    //       this.treeData = res.data.list;

    //       this.$nextTick(() => {
    //         this.treeActiveId = this.treeData[0].id;

    //         this.$refs.treeBox.setCurrentKey(this.treeActiveId);
    //         this.initData();
    //       });
    //     }
    //   );
    // },
  }
};
</script>
<style scoped lang="less"></style>
